/*
 * @Description: 查公交模块（包含初始的公交站点各5条记录的查询，站点3条，以及公交的完全查询和站点的完全查询）
 * @Author: buwei.huang
 * @Date: 2019-05-22 16:43:26
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:14:30
 */
<template>
  <div
    id="app"
    class="search_car_main"
  >
    <!-- 头部搜索 -->
    <header-search ref="headerSearch" />
    <div id="search_car_content">
      <!-- 无数据 -->
      <div
        v-if="show == '2'"
        class="search_nodata flex-v flex-vc"
      >
        <img src="./assets/nodata.png" />
        <span class="nodata_font">对不起，没有您想要的结果</span>
      </div>
      <!-- 内容 -->
      <search-list
        :show="show"
        :GPSinfo="GPSinfo"
        @changeShow="changeShow"
      />
      <!-- 无历史记录 -->
      <no-history v-if="show == '1'" />
    </div>
  </div>
</template>

<script>
import { Header, NoHistory, SearchList } from './components'
import { getCurrentPosition } from '@/utils/LocationUtils.js'
export default {
  name: 'App',
  components: {
    'header-search': Header,
    'no-history': NoHistory,
    'search-list': SearchList
  },
  data() {
    return {
      show: '1', // 1:初始图 2:无数据 3:列表内容展示,
      isLoading: false,
      GPSinfo: {}
    }
  },
  mounted() {
    // 处理顶部input焦点
    let self = this
    self.$refs.headerSearch.$refs.searchInput.focus()
    let startY = 0
    this.$nextTick(() => {
      document.getElementById('search_car_content').addEventListener('touchstart', function (e) {
        startY = e.changedTouches[0].pageY
      }, false)
      document.getElementById('search_car_content').addEventListener('touchmove', function (e) {
        let moveY = e.changedTouches[0].pageY
        if (moveY !== startY) {
          self.$refs.headerSearch.$refs.searchInput.blur()
        }
      }, false)
    })
    // 获取GPS定位
    getCurrentPosition(this).then(res => {
      console.log(res, 'getCurrentPosition~~~')
      this.GPSinfo = { ...res }
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    changeShow(msg) {
      this.show = msg
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
/* 包裹层 */
.search_car_main {
}

.search_nodata {
  width: 100%;
  flex: 1;
  padding-top: 200px;
}
.search_nodata img {
  width: 481px;
  height: 295px;
  margin-bottom: 58px;
}
.nodata_font {
  font-size: 17px; /* no */
  color: rgba(159, 176, 178, 1);
  line-height: 48px;
}
</style>
